<template>
    <div class="addTopDir">
        <div v-if="showLoading" class="maskWrap">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <!-- 输入笔记本名称 -->
        
        <div class="input-group mb-3 " style="width: 300px;">
            <div class="input-group-prepend">
                <!-- <button class="btn btn-outline-secondary" type="button" id="button-addon1">笔记本名</button> -->
                <span class="input-group-text " id="validatedInputGroupPrepend"
                
                >笔记本名</span>
            </div>
            
            <input name="笔记本名" type="text" class="form-control "
            v-validate="{ 
            required: true , 
            'illegalchar': true ,
            'max': 20
            }" 
            maxlength="21"
            :class="{ 'is-invalid' : errors.first('笔记本名') }"
            placeholder="请输入" 
            v-model="dirInfo.title"
            aria-label="Example text with button addon" 
            aria-describedby="button-addon1">
            
            <div class="invalid-feedback" style="display: inline-block !important; ">
                {{ errors.first('笔记本名') }}
            </div>
        </div>  
            <div class="mb-3">
                <label for="validationTextarea">备注信息</label>
                <textarea class="form-control " 
                name="备注信息"
                v-validate="{ required: true , 'illegalchar': true , 'max': 100}"
                maxlength="101"
                :class="{ 'is-invalid' : errors.first('备注信息') }"
                id="validationTextarea" 
                v-model="dirInfo.common"
                placeholder="笔记本的介绍" required></textarea>
                <div class="invalid-feedback">
                    {{ errors.first('备注信息') }}
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-secondary mr-2"
                @click="closeDialogue"
                >取消</button>
                <button type="button" class="btn btn-primary"
                @click="postdata"
                >确定</button>
            </div> 
        
    </div>
</template>

<script>


//工具模块
import { tools } from "../../../../api/tools.js"; 

export default {
    data(){
        return {
            showLoading: false,
            dirInfo:{
                title:"",
                common:""
            }
        };
    },
    inject:['noteAgent'],
    methods:{
        resetData(){
            this.dirInfo.title = ""; 
            this.dirInfo.common = "";
        },
        closeDialogue(){
            this.resetData();
            this.$emit('close');
        },
        setLoading( status ){
            this.showLoading = status;
        },
        confirm(){
            //校验表单
            let that = this;
            let fth = this.noteAgent();
            var { ...item } = this.dirInfo;
            fth.setDir( item , function(){
                that.resetData();
                that.$emit('close');
            });
            
        },
        withValidateData() {
            this.$validator.validate().then(result => {
                if (!result) {
                    // if (this.errors.has('笔记本名')) {
                        
                    //     return
                    // } 
                } else {
                    this.confirm();   // 验证通过后请求接口的方法
                }
            });
        },
        //防抖控制提交数据
        postdata: tools.debounceWithTrigger( function(){
            this.withValidateData();
        } , 1000 , true)
    },
    mounted() {
       
    },
}
</script>

<style lang="scss">

.addTopDir{
    position: relative;
    z-index: 0;
    margin: 1.5em;
    display: inline-block;
}
.maskWrap{
    position: absolute;
    z-index: 1;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>